Gray Text

For many people, white text is too high in contrast for a background so we lighten the white into a light grey to make it easier for the users eye.

This is light gray text

This is dark gray text

          
              <p class="light-gray">This is light gray text</p>
              <p class="dark-gray">This is dark gray text</p>

Center Text

The text-align property specifies the horizontal alignment of text in an element in such a manner that it is placed in center. You can further use properties like display flex + justify content / align items to position your text in center accordingly

This is a centered text

            
                <p class="center-text">This is a centered text</p>

Headings

The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

This is H1

This is H2

This is H3

This is H4

This is H5

This is H6

            
                <h1>This is H1</h1>
                <h2>This is H2</h2>
                <h3>This is H3</h3>
                <h4>This is H4</h4>
                <h5>This is H5</h5>
                <h6>This is H6</h6>

Small Text

The HTML <small> tag makes text one font size smaller in the HTML document. This tag is also commonly referred to as the <small> element.

This is a regular text

This is a small text

            
                <small>This is a small text</small>